<template>
  <div class="bgc-default pad-20">
    <div class="bg-color-white pad-20">
      <div>
        <el-button @click="handleCreate" type="primary">添加商品</el-button>
        <el-button @click="handleCopyRetail" type="primary">从零售库复制</el-button>
      </div>
      <!--顶部搜索 -->
      <div class="top-operate mar-t-20">
        <div class="search-item">
          <label>商品搜索：</label>
          <el-select class="select-class" v-model="textCol" style="width: 120px">
            <el-option label="商品名称" value="title"></el-option>
            <el-option label="商品货号" value="goodsCode"></el-option>
            <el-option label="商品条码" value="goodsBarCode"></el-option>
          </el-select>
          <el-input @keyup.enter.native="handleSearch" v-model="searchKeyword" placeholder="请输入关键词"></el-input>
          <label class="mar-l-20">商品分类：</label>
          <!-- “零售与批发商品分类分开设置”开启 则使用批发分类进行查询 -->
          <span>
            <span v-if="!this.enterpriseConfig.categorySeparate">
              <el-cascader v-model="categoryIds" :props="{ checkStrictly: true }" change-on-select placeholder="选择商品分类"
                :options="categoryData" style="width:150px;" class="default-input" filterable></el-cascader>
            </span>
            <span v-else>
              <el-cascader v-model="wholesaleCategoryIds" :props="{ checkStrictly: true }" change-on-select
                placeholder="选择商品分类" :options="wholesaleCategoryData" style="width:150px;" class="default-input"
                filterable></el-cascader>
            </span>
          </span>
          <div v-if="getVersionType() == 1 || getVersionType() == 4">
            <label class="mar-l-20">商品来源：</label>
            <el-select v-model="supplierType" placeholder="来源" style="width:150px;">
              <el-option label="全部" value=""></el-option>
              <el-option label="总部自营" value="1"></el-option>
              <el-option label="供货联盟" value="3"></el-option>
              <el-option v-for="(item, index) in supplierList" :key="index" :label="item.supplierName"
                :value="item.supplierId"></el-option>
            </el-select>
          </div>
          <el-button-group class="mar-l-20">
            <el-button type="primary" @click="handleSearch">查询</el-button>
            <el-button plain @click="resetSearch">重置</el-button>
          </el-button-group>
        </div>
      </div>
      <!--商品状态 -->
      <div class="tabs-box mar-t-15">
        <el-tabs type="card" v-model="pagingWholesaleStatus" @tab-click="goodsStatusClick">
          <el-tab-pane label="全部" name="0"></el-tab-pane>
          <el-tab-pane label="上架中" name="1"></el-tab-pane>
<!--          <el-tab-pane label="已售空" name="2"></el-tab-pane>-->
          <el-tab-pane label="仓库中" name="3"></el-tab-pane>
        </el-tabs>
      </div>
      <!-- 全选、操作 -->
      <div>
        <div class="pad-t-15 pad-b-15 font-14 v-align-c">
          <el-checkbox class="mar-l-14 mar-r-0" v-model="allChecked" @change="selectAll"><span
              class="mar-l-20">当页全选</span></el-checkbox>
          <span class="pad-l-4 pad-r-4">|</span>
          <div class="width-80">已选{{multipleSelection.length}}项</div>
          <el-button class="batch-btn" @click="handleBatchDown"
            v-if="pagingWholesaleStatus === '0' || pagingWholesaleStatus === '1'">批量下架</el-button>
          <el-button class="batch-btn" @click="handleBatchDelete"
            v-if="pagingWholesaleStatus === '2' || pagingWholesaleStatus === '3'">批量删除</el-button>
          <el-button class="batch-btn" @click="handleExport">批量导出</el-button>
          <el-button class="batch-btn" @click="showBatchCategory">批量设置分类</el-button>
          <el-button class="batch-btn" @click="showBatchGoodsTag">批量设置商品标签</el-button>
          <el-button class="batch-btn" @click="openBatchSetGoodsCustomsGoodsCode"
            v-if="enterpriseConfig.crossBorderBusinessFlag === 1">批量设置海关编码</el-button>
        </div>
      </div>

      <!-- 批量设置分类的弹窗体 如果零售与批发商品分类分开设置 关闭，则操作零售商品类目-->
      <el-container>
        <el-dialog :visible.sync="batchWholesaleCategoryDialogVisible" width="20%" v-el-drag-dialog :center="true"
          :before-close="handleClose()">
          <div>
            <el-header v-if="!this.enterpriseConfig.categorySeparate">
              <span>商品分类：</span>
              <!-- 零售与批发商品分类分开设置 关闭 -->
              <el-cascader v-model="categoryIds" :props="{ checkStrictly: true }" change-on-select placeholder="选择商品分类"
                :options="categoryData" class="special-input" clearable></el-cascader>
            </el-header>
            <el-header v-else>
              <div v-if="!this.enterpriseConfig.wholesaleCategoryAlias">
                <!-- 批发商品分类使用别名 关闭 -->
                <span>商品分类：</span>
                <el-cascader v-model="wholesaleCategoryIds" :props="{ checkStrictly: true }" change-on-select
                  placeholder="选择商品分类" :options="categoryData" class="special-input" clearable></el-cascader>
              </div>
              <div v-else>
                <span>商品分类：</span>
                <el-cascader v-model="wholesaleCategoryIds" :props="{ checkStrictly: true }" change-on-select
                  placeholder="选择商品分类" :options="wholesaleCategoryData" class="special-input" clearable></el-cascader>
              </div>
            </el-header>
          </div>

          <el-footer>
            <el-button type="primary" @click="handleBatchWholesaleCategory">保存</el-button>
            <el-button @click="batchWholesaleCategoryDialogVisible = false">取消</el-button>
          </el-footer>

        </el-dialog>
      </el-container>

      <!-- 内容列表 -->
      <div class="table-container">
        <el-table ref="multipleTable" :data="goodsList" @selection-change="handleSelectionChange"
          v-loading="listLoading" element-loading-text="加载中" style="width: 100%" header-cell-class-name="default-header"
          row-class-name="default-row">
          <el-table-column width="50px" type="selection"></el-table-column>
          <el-table-column width="120px" label="排序" prop="sortNo" fixed="left"></el-table-column>
          <el-table-column width="320px" label="商品" fixed="left">
            <template slot-scope="scope">
              <div class="flex v-align-c cursor-p mar-r-30" @click="handleEdit(scope.row)">
                <label><img :src="scope.row.mainImage" class="user-avatar cursor-p"></label>
                <div class="font-14 pad-l-10 v-align-h height-65">
                  <div class="goods-title">
                    <div class="line-2">
                      <el-tag size="mini" v-if="scope.row.skuFlag == 1" type="danger" effect="light">多</el-tag>
                      <template v-if="scope.row.crossBorderType === 2">
                        <el-tag size="mini" type="danger" effect="light">保</el-tag>
                      </template>
                      {{scope.row.title}}
                    </div>
                  </div>
                  <div>
                    <div v-if="enterpriseConfig.categorySeparate">
                      <template v-if="scope.row.wholesaleCategoryName">
                        <div class="category-style">[{{scope.row.wholesaleCategoryName}}]</div>
                      </template>
                    </div>
                    <div v-else>
                      <template v-if="scope.row.categoryName">
                        <div class="category-style">[{{scope.row.categoryName}}]</div>
                      </template>
                    </div>
                  </div>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column width="150px" label="来源">
            <template slot-scope="scope">
              <span v-if="scope.row.goodsSource == 0">总部自营</span>
              <span v-if="scope.row.goodsSource == 1">{{scope.row.supplierName}}</span>
              <span v-if="scope.row.goodsSource == 2">淘宝联盟</span>
              <span v-if="scope.row.goodsSource == 3">供货联盟</span>
            </template>
          </el-table-column>
          <el-table-column v-if="getVersionType() == 2 || getVersionType() == 1 || getVersionType() == 4" width="150px" label="供应价">
            <template slot-scope="scope">
              <template v-if="scope.row.goodsSource == 3">
                <span v-if="scope.row.supplyAlliancePrice">
                  <span> ￥{{scope.row.supplyAlliancePrice}} </span>
                  <span
                    v-if="scope.row.supplyAllianceMaxPrice !== null && scope.row.supplyAlliancePrice  !== scope.row.supplyAllianceMaxPrice">--￥{{scope.row.supplyAllianceMaxPrice}}
                  </span>
                </span>
                <span v-else>--</span>
              </template>
              <template v-else>
                <template v-if="scope.row.supplyPrice">
                  <span v-if="scope.row.supplyPrice">￥{{scope.row.supplyPrice}}</span>
                </template>
              </template>
            </template>
          </el-table-column>
          <!-- <el-table-column v-if="getVersionType() == 2 || getVersionType() == 1 || getVersionType() == 4" width="150px"
            label="供应价">
            <template slot-scope="scope">
              <span v-if="scope.row.goodsSource == 3">￥{{scope.row.supplyAlliancePrice || '0.00'}}</span>
              <span v-else>￥{{scope.row.supplyPrice || '0.00'}}</span>
            </template>
          </el-table-column> -->
          <el-table-column v-if="getVersionType() == 1 || getVersionType() == 4" width="150px" label="批发价">
            <template slot-scope="scope">
              ￥{{scope.row.wholesalePrice || '0.00'}}
            </template>
          </el-table-column>
          <el-table-column v-if="getVersionType() == 1 || getVersionType() == 4" width="150px" label="起批数">
            <template slot-scope="scope">
              {{scope.row.wholesaleNum}}
            </template>
          </el-table-column>
          <el-table-column width="150px" label="库存">
            <template slot-scope="scope">
              <template v-if="scope.row.stock <= scope.row.warnStock">
                <span style="color: #dd1100">{{scope.row.stock}}</span>
              </template>
              <template v-else>
                {{scope.row.stock}}
              </template>
            </template>
          </el-table-column>
          <el-table-column width="150px" label="销量" prop="salesNum"></el-table-column>
          <el-table-column width="140px" label="标签" :formatter="goodsTagFormatter" />
          <el-table-column width="150px" label="状态">
            <template slot-scope="scope">
              <template v-if="scope.row.stock == 0">
                已售空
              </template>
              <template v-else>
                {{ dict.upDwonStatusFlag[scope.row.wholesaleGoodsStatus]}}
              </template>
            </template>
          </el-table-column>
          <el-table-column width="180px" label="操作" align="right" fixed="right">
            <template slot-scope="scope">
              <template v-if="scope.row.auditType === 0 && getVersionType() === '2'">
                <span type="warning"> 审 核 中 </span>
              </template>
              <template v-else>
                <template v-if="scope.row.wholesaleGoodsStatus === 0 && scope.row.auditType !== 0">
                  <el-button type="text" size="medium" @click="handleUp(scope.row)">上架</el-button>
                </template>
                <template v-if="scope.row.wholesaleGoodsStatus === 1 && scope.row.auditType !== 0">
                  <el-button type="text" size="medium" @click="handleDown(scope.row)">下架</el-button>
                </template>
                <el-button type="text" size="medium" @click="handleEdit(scope.row)">编辑</el-button>
                <el-button type="text" size="medium" @click="handleDelete(scope.row)">删除</el-button>
              </template>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 列表分页 -->
      <div class="pagination">
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="searchListQuery.currentPage" :page-sizes="[10, 20, 50, 100]" :page-size="searchListQuery.size"
          layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </div>
      <el-dialog title="选择零售商品" v-el-drag-dialog :visible.sync="selectGoodsVisible" :close-on-press-escape="true"
        :center="true" width="850px">
        <div class="scroll-layer-box">
          <goods-select :goodsType="30" :goodsSource="'0,1,2,3'" :isContainsSupplyAllianceGoods='1' :onFinish="handleCopyFinish" :crossBorderType="null"></goods-select>
        </div>
      </el-dialog>
      <!-- 批量设置商品标签的弹窗 -->
      <el-dialog :visible.sync="batchGoodsTagDialogVisible" width="25%" v-el-drag-dialog :center="true">
        <el-form style="width: 520px">
          <el-form-item label="商品标签:">
            <el-select style="width: 250px;" multiple collapse-tags placeholder="请选择" v-model="selectedGoodsTag">
              <el-option v-for="item in goodsTagList" :key="item.goodsTagId" :label="item.goodsTagName"
                :value="item.goodsTagId">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="handleBatchSaveGoodsTag">保存</el-button>
          <el-button @click="batchGoodsTagDialogVisible = false">取消</el-button>
        </span>
      </el-dialog>
      
      <!-- 批量设置海关编码弹窗 -->
      <BatchSetCustomsGoodsCode ref="batchSetCustomsGoodsCodeRef"
        :onSuccess="handleBatchSetCustomsGoodsCodeSuccessCall">
      </BatchSetCustomsGoodsCode>
    </div>
  </div>
</template>

<script>
  import {
    getGoodsList,
    upGoods,
    downGoods,
    deleteGoods,
    handleBatchDown,
    handleDelete,
    listGoodsCategory,
    listWholesaleGoodsCategory,
    handleBatchCategory
  } from '@/api/goods/goods'
  import {
    getDictByGroupName,
    getDictCommon
  } from '@/api/common/common'
  import {
    listSupplier
  } from '@/api/user/supplier'
  import {
    pageAuditGoods
  } from '@/api/goods/auditGoods'
  import goodsSelect from '../components/goods-select'
  import {
    downloadFile
  } from '@/api/common/common'
  import elDragDialog from '@/directive/el-dragDialog'
  import {
    getByEnterpriseId
  } from '@/api/user/enterprise'
  import {
    getGoodsTagListByBusType,
    batchSaveGoodsTagDetail
  } from '@/api/goods/goodsTag'
  import BatchSetCustomsGoodsCode from '@/views/goods/components/batch-set-customs-goods-code'
  export default {
    components: {
      goodsSelect,
      BatchSetCustomsGoodsCode
    },
    directives: {
      elDragDialog
    },
    data() {
      return {
        total: null,
        multipleSelection: [],
        listLoading: true,
        supplierType: '',
        searchListQuery: {
          enterpriseId: this.getEnterpriseId(),
          supplierId: '',
          supplierType: '',
          currentPage: 1,
          size: 10,
          title: ''
        },
        supplierId: '',
        supplierList: [],
        searchLabelType: '',
        distributionType: null,
        textCol: 'title',
        searchKeyword: '',
        dict: {
          upDwonStatusFlag: {}
        },
        isDict: false,
        pagingWholesaleStatus: '0',
        categoryIds: [],
        goodsList: [],
        comDict: {},
        // 商品的所有分类json
        categoryData: [],
        selectGoodsVisible: false,
        allChecked: false,
        // 批量设置分类弹窗体
        batchWholesaleCategoryDialogVisible: false,
        // 选中的批发商品类目
        wholesaleCategoryIds: [],
        // 系统参数
        enterpriseConfig: {
          categorySeparate: '0',
          wholesaleCategoryAlias: '0'
        },
        // 批发商品类目
        wholesaleCategoryData: [],
        goodsTagList: [],
        batchGoodsTagDialogVisible: false,
        selectedGoodsTag: []
      }
    },
    // 初始化页面
    created() {
      const queryParams = this.getCurrentPage().query
      if (queryParams && queryParams.supplierId) {
        this.supplierId = queryParams.supplierId
      }
      this.initEnterpriseConfig()
      this.listSupplier()
      this.initDict()
      this.listGoodsCategory()
      this.listWholesaleGoodsCategory()
      this.initGoodsList()
      this.initDictCommon()
      this.getGoodsTagList()
    },
    filters: {
      priceFilter(e) {
        return e.toFixed(2)
      }
    },
    mounted() {},
    methods: {
      initDictCommon() {
        getDictCommon().then(response => {
          this.comDict = response.data
        })
      },
      // 更改当前页数
      handleCurrentChange(val) {
        this.searchListQuery.currentPage = val
        this.initGoodsList()
      },
      // 更改当前页面大小
      handleSizeChange(val) {
        this.searchListQuery.size = val
        this.initGoodsList()
      },
      // 勾选
      handleSelectionChange(val) {
        this.multipleSelection = val
        if (this.multipleSelection.length === this.goodsList.length) {
          this.allChecked = true
        } else {
          this.allChecked = false
        }
      },
      initDict() {
        getDictByGroupName('ProjectGoodsDTO').then(response => {
          this.dict = response.data
        })
      },
      setSearchListQuery() {
        this.searchListQuery = {
          enterpriseId: this.getEnterpriseId(),
          supplierId: '',
          currentPage: this.searchListQuery.currentPage,
          size: this.searchListQuery.size,
          distributionType: this.searchListQuery.distributionType,
          supplierType: null,
          liveGoodsType: this.searchListQuery.liveGoodsType
        }
        // 1总部自营  2供应商 3-供货联盟
        if (this.supplierType) {
          if (this.supplierType === '1') {
            this.searchListQuery.goodsSource = 0
          } else if (this.supplierType === '3') {
            this.searchListQuery.goodsSource = 3
          } else {
            this.searchListQuery['supplierId'] = this.supplierType
            this.searchListQuery.goodsSource = 1
          }
        }
        if (this.searchLabelType) {
          this.searchListQuery['labelType'] = this.searchLabelType
        }
        this.searchListQuery[this.textCol] = this.searchKeyword
        this.searchListQuery['oneCategoryId'] = ''
        this.searchListQuery['twoCategoryId'] = ''
        this.searchListQuery['threeCategoryId'] = ''
        this.searchListQuery['wholesaleOneCategoryId'] = ''
        this.searchListQuery['wholesaleTwoCategoryId'] = ''
        this.searchListQuery['wholesaleThreeCategoryId'] = ''
        const categoryIds = this.categoryIds
        const wholesaleCategoryIds = this.wholesaleCategoryIds
        if (categoryIds.length === 1) {
          this.searchListQuery['oneCategoryId'] = categoryIds[0]
        }
        if (categoryIds.length === 2) {
          this.searchListQuery['twoCategoryId'] = categoryIds[1]
        }
        if (categoryIds.length === 3) {
          this.searchListQuery['threeCategoryId'] = categoryIds[2]
        }
        if (wholesaleCategoryIds.length === 1) {
          this.searchListQuery['wholesaleOneCategoryId'] = wholesaleCategoryIds[0]
        }
        if (wholesaleCategoryIds.length === 2) {
          this.searchListQuery['wholesaleTwoCategoryId'] = wholesaleCategoryIds[1]
        }
        if (wholesaleCategoryIds.length === 3) {
          this.searchListQuery['wholesaleThreeCategoryId'] = wholesaleCategoryIds[2]
        }
        // 搜索状态
        this.searchListQuery['pagingWholesaleStatus'] = this.pagingWholesaleStatus
      },
      initGoodsList() {
        this.setSearchListQuery()
        this.listLoading = true
        if (this.getVersionType() === '2') {
          // 供应商版
          pageAuditGoods(this.searchListQuery).then(response => {
            this.total = response.data.total
            this.goodsList = response.data.records
            if (!this.isDict) {
              this.dict = response.data.dict
              this.isDict = true
            }
            this.listLoading = false
          })
        } else {
          const goodsTypes = [31, 32]
          this.searchListQuery.goodsTypes = goodsTypes.join(',')
          this.searchListQuery.distributionType = this.distributionType
          getGoodsList(this.searchListQuery).then(response => {
            this.total = response.total
            this.goodsList = response.records
            if (!this.isDict) {
              this.dict = response.dict
              this.isDict = true
            }
            this.listLoading = false
          })
        }
      },
      // 获取类目
      listGoodsCategory() {
        const enterpriseId = this.getEnterpriseId()
        listGoodsCategory(enterpriseId).then(response => {
          this.categoryData = response.data
        })
      },
      // 获取批发商品类目
      listWholesaleGoodsCategory() {
        const enterpriseId = this.getEnterpriseId()
        listWholesaleGoodsCategory(enterpriseId).then(response => {
          this.wholesaleCategoryData = response.data
        })
      },
      // 获取系统参数
      initEnterpriseConfig() {
        const enterpriseId = this.getEnterpriseId()
        getByEnterpriseId(enterpriseId).then((response) => {
          if (response.isError) return
          this.enterpriseConfig = response.data
        })
      },
      handleCreate() {
        const routeData = this.$router.resolve({
          path: '/goods/edit/index',
          query: {
            fromListPage: '31'
          }
        })
        const newWindow = window.open(routeData.href, 'newWholesaleGoods')
        newWindow.onload = () => (newWindow.document.title = '新建批发商品')
      },
      handleCopyRetail() {
        this.selectGoodsVisible = true
      },
      handleCopyFinish() {
        this.selectGoodsVisible = false
        this.initGoodsList()
      },
      handleSearch() {
        this.searchListQuery.currentPage = 1
        this.initGoodsList()
      },
      resetSearch() {
        this.searchKeyword = ''
        this.supplierType = ''
        this.categoryIds = []
        this.wholesaleCategoryIds = []
        this.searchListQuery = {
          enterpriseId: this.getEnterpriseId(),
          supplierId: '',
          currentPage: 1,
          size: 10,
          title: ''
        }
        this.initGoodsList()
      },
      // 商品状态
      goodsStatusClick() {
        this.handleSearch()
      },
      listSupplier() {
        listSupplier({
          enterpriseId: this.getEnterpriseId()
        }).then(response => {
          if (response.isError) return
          this.supplierList = response.data
        })
      },
      // 上架
      handleUp(row) {
        if (row.stock === 0) {
          this.$message({
            type: 'warning',
            message: '库存为0无法上架'
          })
          return
        }
        if (!row.wholesalePrice && row.ladderAuth === '0') {
          this.$message({
            type: 'warning',
            message: '批发价为空无法上架'
          })
          return
        }
        if (!row.wholesaleNum && row.ladderAuth === '0') {
          this.$message({
            type: 'warning',
            message: '起批数为空无法上架'
          })
          return
        }
        if (row.supplyAllianceUpdateType !== 0) {
          this.$confirm('商品信息已更新，是否确认上架？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            upGoods(row.goodsId, 31).then(response => {
              if (response.isError) return
              this.$message({
                message: '上架成功',
                type: 'success'
              })
              this.initGoodsList()
            })
          }).catch(() => {})
        } else {
          upGoods(row.goodsId, 31).then(response => {
            if (response.isError) return
            this.$message({
              message: '上架成功',
              type: 'success'
            })
            this.initGoodsList()
          })
        }
      },
      // 下架
      handleDown(row) {
        const goodsId = row.goodsId
        downGoods(goodsId, 31)
          .then(response => {
            if (response.isError) return
            this.$message({
              message: '下架成功',
              type: 'success'
            })
            this.initGoodsList()
          })
      },
      // 编辑
      handleEdit(row) {
        const routeData = this.$router.resolve({
          path: '/goods/edit/index',
          query: {
            goodsId: row.goodsId,
            fromListPage: '31'
          }
        })
        const newWindow = window.open(routeData.href, row.goodsId)
        newWindow.onload = () => (newWindow.document.title = row.title)
      },
      // 删除
      handleDelete(row) {
        this.$confirm('此操作将删除该商品，是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          const goodsId = row.goodsId
          deleteGoods(goodsId, 31).then(response => {
            if (response.isError) return
            this.initGoodsList()
          })
        })
      },
      // 批量下架
      handleBatchDown() {
        const selections = this.multipleSelection
        if (selections.length === 0) {
          this.$message({
            type: 'error',
            message: '请勾选商品!'
          })
          return
        }
        const array = []
        selections.forEach(e => {
          array.push(e.goodsId)
        })
        const name = '是否确认下架当前勾选的' + array.length + ' 条数据？'
        this.$confirm(name, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          const params = {
            goodsIds: array,
            goodsType: 31
          }
          handleBatchDown(params).then(response => {
            if (response.isError) return
            this.$message({
              message: '下架成功',
              type: 'success'
            })
            this.initGoodsList()
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      // 批量删除
      handleBatchDelete() {
        const selections = this.multipleSelection
        if (selections.length === 0) {
          this.$message({
            type: 'error',
            message: '请勾选商品!'
          })
          return
        }
        this.$confirm('此操作将批量删除商品，是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          const array = []
          selections.forEach(e => {
            array.push(e.goodsId)
          })
          const params = {
            goodsIds: array,
            goodsType: 31
          }
          handleDelete(params).then(response => {
            if (response.isError) return
            this.$message({
              message: '成功删除',
              type: 'success'
            })
            this.initGoodsList()
          })
        })
      },
      // 导出
      handleExport() {
        const selections = this.multipleSelection
        let name = ''
        if (selections.length === 0) {
          name = '是否确认导出当前筛选条件下的所有数据？'
        } else {
          name = '是否确认导出当前勾选的' + selections.length + '条数据？'
        }
        this.$confirm(name, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          const params = {
            enterpriseId: this.getEnterpriseId(),
            goodsTypes: '31, 32'
          }
          if (selections.length === 0) {
            this.setSearchListQuery()
            Object.assign(params, this.searchListQuery)
          } else {
            params.goodsIds = selections.map(e => e.goodsId).join(',')
          }
          downloadFile('/goods/projectGoods/exportGoods', params, '商品列表.xlsx')
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
      },
      // 批量设置分类弹窗校验
      showBatchCategory() {
        const selections = this.multipleSelection
        if (selections.length === 0) {
          this.$message({
            type: 'error',
            message: '请勾选商品!'
          })
          return
        }
        this.batchWholesaleCategoryDialogVisible = true
      },
      // 批量设置分类
      handleBatchWholesaleCategory() {
        const selections = this.multipleSelection
        if (selections.length === 0) {
          this.$message({
            type: 'error',
            message: '请勾选商品!'
          })
          return
        }
        if (this.categoryIds.length === 0 && this.wholesaleCategoryIds.length === 0) {
          this.$message({
            type: 'error',
            message: '请选择类目!'
          })
        }
        const array = []
        selections.forEach(e => {
          array.push(e.goodsId)
        })
        const params = {
          enterpriseId: this.getEnterpriseId(),
          goodsIds: array,
          goodsType: 31,
          oneCategoryId: this.categoryIds[0],
          twoCategoryId: this.categoryIds[1],
          threeCategoryId: this.categoryIds[2],
          wholesaleOneCategoryId: this.wholesaleCategoryIds[0],
          wholesaleTwoCategoryId: this.wholesaleCategoryIds[1],
          wholesaleThreeCategoryId: this.wholesaleCategoryIds[2]
        }
        handleBatchCategory(params).then(response => {
          if (response.isError) return
          this.$message({
            message: '分类设置成功',
            type: 'success'
          })
          this.batchWholesaleCategoryDialogVisible = false
          this.initGoodsList()
        })
        this.resetSearch()
      },
      handleClose() {
        this.batchCategoryDialogVisible = false
      },
      selectAll() {
        if (this.multipleSelection.length === 0 || this.multipleSelection.length < this.goodsList.length) {
          this.goodsList.forEach(item => {
            this.$refs.multipleTable.toggleRowSelection(item, true)
            // this.allChecked = true
          })
        } else {
          this.$refs.multipleTable.clearSelection()
          // this.allChecked = false
        }
      },
      showBatchGoodsTag() {
        const selections = this.multipleSelection
        if (selections.length === 0) {
          this.msgError('请勾选商品')
          return
        }
        this.batchGoodsTagDialogVisible = true
      },
      handleBatchSaveGoodsTag() {
        const selections = this.multipleSelection
        if (selections.length === 0) {
          this.msgError('请勾选商品')
          return
        }
        if (this.selectedGoodsTag.length === 0) {
          this.msgError('请选择标签')
          return
        }
        const goodsIdList = []
        selections.forEach(e => {
          goodsIdList.push(e.goodsId)
        })
        const data = {}
        data.goodsIdList = goodsIdList
        data.goodsTagIdList = this.selectedGoodsTag
        data.goodsTagBusType = 2
        batchSaveGoodsTagDetail(data).then(response => {
          if (response.isError) return
          this.msgSuccess('设置成功')
          this.batchGoodsTagDialogVisible = false
          this.initGoodsList()
          this.selectedGoodsTag = []
        })
      },
      getGoodsTagList() {
        getGoodsTagListByBusType(2, this.getEnterpriseId()).then(response => {
          if (response.isError) return
          this.goodsTagList = response.data
        })
      },
      goodsTagFormatter(row) {
        if (row.goodsTagList !== null && row.goodsTagList !== undefined && row.goodsTagList.length > 0) {
          let tagTip = ''
          row.goodsTagList.forEach(goodsTag => {
            if (goodsTag.goodsTagBusType === 2) {
              tagTip = tagTip + goodsTag.goodsTagName + ' | '
            }
          })
          if (tagTip !== '') {
            tagTip = tagTip.substring(0, tagTip.length - 2)
          }
          return tagTip
        }
        return '-'
      },
      openBatchSetGoodsCustomsGoodsCode() {
        this.setSearchListQuery()
        this.searchListQuery.goodsTypes = '31,32'
        this.$refs.batchSetCustomsGoodsCodeRef.open(this.searchListQuery)
      },
      handleBatchSetCustomsGoodsCodeSuccessCall() {
        this.initGoodsList()
      }
    }
  }
</script>
<style lang="less" scoped>
  .top-operate {
    margin-bottom: 0;
    height: 85px;
    background-color: #f7f8fa;
    display: flex;
    align-items: center;
    white-space: nowrap;
    flex-wrap: nowrap;
    width: 100%;
    overflow-x: auto;
  }

  .search-item {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    padding: 0 20px;

    label {
      font-weight: unset;
    }

    >div,
    .el-cascader {
      margin-right: 0px;
    }

    .el-input {
      width: 200px;
    }
  }

  .btn-search {
    height: 60px;
    display: flex;
    align-items: center;
  }

  .user-avatar {
    width: 65px;
    height: 65px;
    display: block;
    padding: 1px;
    border: #efefef 1px solid;
  }

  .category-style {
    color: #636669;
  }

  .v-align-h {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
  }

  .goods-title {
    color: #155bd4;
    line-height: 1.2;
  }

  // 2行文字展示
  .line-2 {
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-word;
  }
</style>
